<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!--
    css盒模型：
      基本概念：标准模型 + ie模型

      ？？？
      标准模型和ie模型区别
        标准模型和ie模型的区别就是计算高度和宽度的方式不同
        标准模型：指的是content的宽度和高度， 不包括padding和border
        ie模型：是计算border和padding的

      css如何设置这两种模型
         box-sizing: content-box; 标准模型(浏览器默认)
         box-sizing: border-box; ie模型

      js如何设置获取盒模型对应的宽和高
        dom.style.width/height(只能取内联的值)
        dom.currentStyle.width/height(取浏览器渲染之后的值，只能是ie浏览器可以用)
        window.getComputedStyle(dom).width/height (取浏览器渲染之后的值，chrome, firefox 浏览器可以用)
        dom.getBoundingClientRect().width/height (取浏览器渲染之后的值)

      实例题（根据盒模型解释边距重叠）

      BFC或者IFC（边距重叠解决方案）
        BFC基本概念：块级格式化上下文
        BFC的原理：
          1.在BFC这个元素的垂直方向的边距会发生重叠
          2.BFC的区域不会与浮动元素的box重叠
          3.BFC在页面上是一个独立的容器，外面的元素不会影响里边的元素，里边的元素也不会影响外边的元素
          4.计算BFC高度的时候，浮动元素也会参与计算
        如何创建BFC：
          overflow: hidden
          float的值不为none
          只要position的值不是static或者是relative就创建了BFC
          display为table，table-cell, table-caption
          overflow为hidden, visible, auto

  -->
</body>
</html>
